<template>
    <div class="index">
        <div class="index-box">
            <el-form :model="article" ref="article" label-width="100px" class="index-emailFrom">
                <el-form-item label="标题" prop="articleName">
                    <el-input v-model="article.articleName" size="small"></el-input>
                </el-form-item>
                <el-form-item label="描述" prop="articleDescription">
                    <el-input v-model="article.articleDescription" size="small"></el-input>
                </el-form-item>
                <el-form-item label="分类" prop="plateId">
                    <el-select v-model="article.plateId" placeholder="请选择" @change="tagList">
                        <el-option v-for="item in options" :key="item.classifyId" :label="item.classifyName"
                            :value="item.classifyId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="标签" prop="label">
                    <el-select v-model="article.label" multiple placeholder="请选择" @change='$forceUpdate()'>
                        <el-option v-for="item in tagLists" :key="item.tagId" :label="item.tagName" :value="item.tagId">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="标图" prop="region">
                    <el-upload action="#" ref="upload" :file-list="fileList" :on-preview="handlePreview"
                        :on-remove="handleRemove" list-type="picture-card" :http-request="handleFileUpload"
                        :show-file-list="true">
                        <i class="el-icon-plus"></i>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="dialogImageUrl" alt="">
                    </el-dialog>
                </el-form-item>
                <el-form-item label="正文" prop="text">
                    <wangEditorCom @catchData="catchData" ref="editorRef" v-if="sonContent" :content="sonContent">
                    </wangEditorCom>
                    <!-- <div id="editorTitle" class="toolbar"></div> -->
                </el-form-item>
                <el-form-item class="index-emailFrom-can">
                    <el-button type="info" @click="saveArticle(1)" size="small">草稿</el-button>
                    <el-button type="info" @click="saveArticle(2)" size="small">保存</el-button>
                </el-form-item>
            </el-form>
        </div>

    </div>
</template>

<script>
import { AlbumUpload, deleteFile } from '@/assets/api/fileUpload.js';
import { queryDetail, editDetail } from '@/assets/api/article.js';
import { selectTagList, selectClassifyList } from '@/assets/api/classifyTag.js';
import wangEditorCom from '../../components/upload/wangEditorCom.vue';
export default {
    data() {
        return {
            routerArticleId: '',
            sonContent: "",
            tagLists: [],
            options: [],
            article: {
                articleId: "",
                articleName: '',
                plateId: '',
                label: '',
                image: '',
                articleContent: '',
                status: 0,
                articleDescription:''
            },
            dialogImageUrl: '',
            dialogVisible: false,
            fileList: []
        }
    },
    components: {
        wangEditorCom
    },
    created() {
        this.classifyList(1);
    },
    mounted() {
        this.routerArticleId = this.$route.params.articleId
        if (this.routerArticleId != undefined && this.routerArticleId != '') {
            this.showDetail(this.routerArticleId)
        }
    },
    methods: {
        //查询标签
        async tagList(key) {
            selectTagList(key).then((resp) => {
                this.tagLists = resp.data || []
            })
        },
        //查询分类列表
        async classifyList(val) {
            selectClassifyList(val).then((resp) => {
                this.options = resp.data || []
            })
        },
        //获取富文本内容
        catchData(content, text) {
            this.article.articleContent = content;
        },

        //保存文章
        async saveArticle(type) {
            var labelstr = this.article.label.toString();
            this.article.label = labelstr;
            this.article.status = type;
            editDetail(this.article).then((resp) => {
                if (resp.code == 200) {
                    this.$message.success("保存成功");
                    this.$store.dispatch("delVisitedViews", this.$route)
                    this.$router.push("/article/onindex")
                } else {
                    this.$message.error(resp.message);
                }
            })
        },
        //查看文章详情
        async showDetail(value) {
            queryDetail(value).then((resp) => {
                this.article.articleContent = resp.data.articleContent,
                    this.article.articleId = resp.data.articleId,
                    this.article.articleName = resp.data.articleName,
                    this.article.image = resp.data.imageId,
                    this.article.plateId = resp.data.plateId,
                    this.article.articleDescription=resp.data.articleDescription,
                    this.tagList(this.article.plateId)
                    if(resp.data.labelList.length>0){
                        var listValue=resp.data.labelList.length;
                        var list=[];
                        for(var i=0;i<listValue;i++){
                            list.push(resp.data.labelList[i].tagId)
                        }
                        this.article.label = list;
                    }
                this.sonContent = resp.data.articleContent
                this.fileList.push({ 'name': resp.data.imageId, 'url': resp.data.imageUrl })

            })
        },

        // 处理移除操作
        handleRemove(file, fileList) {
            var fileName = file.name;
            deleteFile(fileName).then((resp) => {
                if (resp.code == 200) {
                    this.article.image = ''
                }
            })
        },
        // 处理预览操作
        handlePreview(file) {
            console.log(file);
        },
        // 处理文件上传操作
        handleFileUpload(file) {
            this.loading = true;
            var form = new FormData();
            // 添加键值对
            form.append("file", file.file);
            // 调用后端服务器的接口
            AlbumUpload(form).then((resp) => {
                this.dialogImageUrl = resp.data.pictureUrl;
                this.article.image = resp.data.pictureId;
            }).catch((e) => {
                this.$message.error(e.message);
                this.$refs.upload.clearFiles();
            })
        }
    }
}
</script>

<style scoped>
.index {
    width: 100%;
    min-height: 100%;
    padding: 25px;
    box-sizing: border-box;
}

.index-box {
    width: 100%;
    min-height: 100%;
    background: #ffffff;
    padding: 15px;
    box-sizing: border-box;
    border-radius: 5px;
}

.toolbar {
    /* border: 1px solid #ccc; */

}

.text {
    border: 1px solid #ccc;
    height: 400px;
    z-index: 1 !important;
}

.index-emailFrom-can {
    width: 100%;
    display: flex;
    justify-content: flex-end;
}

/* 说明文档 */
.index-foot {
    width: 100%;
    height: 70px;
    background: #EEF1F6;
    margin-bottom: 15px;
    border-radius: 5px;
    font-size: 16px;
    color: #666666;
    line-height: 70px;
    padding: 0 15px;
}
</style>